/**
 * @Author:周邱艳
 * @Date:2020/6/30
 * @Description:这是持仓详情页的收益走势
 */
import React,{Component} from "react";
import {Card} from "antd";
import ReactEcharts from "echarts-for-react";
import axios from "axios";

export default class IncomeRate extends Component{
    //返回柱状图配置对象
    constructor(props) {
        super(props);
        this.getCategorys()
        this.state={
            comEarning:[],//总表
            total:[],//总数据
            vol:[],//小标识名字
            dat:[]//横坐标日期
        }
        //数据绑定
        this.getCategorys=this.getCategorys.bind(this)
        this.getOption=this.getOption.bind(this)


    }

    getCategorys = () => {
        //数据请求
        axios({
            method:"GET",
            url:"http://39.101.141.248:9527/comEarningRecord/showComEarningRecordForChart",
            params:{accountId:this.props.fatheraccountId}//comBaseId:this.props.comBaseId
        }).then(
            (res) => {
                //状态码判断
                if(res.data.code===200){
                    var total=[]//初始化总数据
                    var data=res.data.comEarning.comEarning//数据
                   total.push({data,type: 'line',areaStyle: { normal: {label : {show: true}}}})
                    var dat=res.data.comEarning.tradeDate//初始化横坐标日期
                    //数据更新
                    this.setState({
                        combinationYields: res.data.combinationYields,
                        total:total,
                        dat:dat,
                    })
                    //状态码判断
                }

            }
        ).catch(function (error) {//异常处理
            console.log(error);
        })
    }
    //组件挂载后
    componentDidMount() {
        this.getCategorys()

    }
    //可视化
    getOption = () =>{
        return{
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: this.state.dat
            },
            yAxis: {
                type: 'value',

            },
            series: this.state.total
        }
    }
    render() {
        return (
            <div style={{width:"100%",height:"80%"}}>
                <Card >
                    <ReactEcharts option={this.getOption()}/>
                </Card>
            </div>
        );
    }
}
